<template>
    <div id="jx-header" >
        <div id="navbar">
            <el-row class="jx-header">
                <el-col class="jx-header-style" >
                    <!-- <div class="jx-header-logo" >
                        <img :src="infoData.innerLogoImage[0].keyValuePath" />
                        <span>{{ infoData.projectName[0].keyValue }}</span>
                    </div> -->
                    <div class="jx-header-logo">
                        <img :src="innerLogoImage.keyValuePath"  height="28"/>
                        <span v-if="innerLogoImage.keyValuePath !='' && projectName.keyValuePath !=''"  style="padding-left:0">|</span>
                        <span style="border-left:none" v-if="projectName.keyValuePath !=''">{{ projectName.keyValue }}</span>
                    </div>
                </el-col>
                <el-col :span="12" style="padding-left:40px;" >
                    <el-col :span="24" class="jx-header-nav">
                        <!-- 教师端 -->
                        <el-menu :default-active="activeIndex" mode="horizontal" :router="true" @select="selecthandel"    v-if="roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER'">
                            <el-menu-item index="/Teaching/index">
                                <i class="iconfont icon-kecheng"></i>我的教学</el-menu-item>
                            <el-menu-item index="/Teaching/Course/MakeCourseList">
                                <i class="iconfont icon-fanganzhizuo_huaban"></i>创作课程</el-menu-item>
                                <!--课程体系应白哥要求先隐藏  -->
                            <el-menu-item index="/Teaching/Systerm" v-if="SystermDisplay == 1">
                                <i class="iconfont icon-xiangmutixi"></i>课程体系</el-menu-item>
                            <el-menu-item index="/Teaching/TEnvironmentalTraining/TrainingList">
                                <i class="iconfont icon-computer"></i>环境实训</el-menu-item>
                            <!-- <el-menu-item index="/TeachingStatistics"><i class="iconfont icon-tongji"></i>教学统计</el-menu-item> -->
                            <el-menu-item index="/Teaching/FileCheck">
                                <i class="iconfont icon-kehuchazhong"></i>文件查重</el-menu-item>
                        </el-menu>
                        <!-- 学生端 -->
                        <el-menu :default-active="activeIndex" mode="horizontal" :router="true" v-if="roles == 'STUDENT'">
                            <el-menu-item index="/Teaching/index">
                                <i class="iconfont icon-xuexishuben"></i>我的学习</el-menu-item>
                            <el-menu-item index="/Teaching/Systerm" v-if="SystermDisplay == 1">
                                <i class="iconfont icon-xiangmutixi"></i>课程体系</el-menu-item>
                            <el-menu-item index="/Teaching/SEnvironmentalTraining">
                                <i class="iconfont icon-computer"></i>环境实训</el-menu-item>
                            <el-menu-item index="/Teaching/MyFiles">
                                <i class="iconfont icon-tongji3"></i>我的档案</el-menu-item>

                            <!-- <el-menu-item index=""><i class="iconfont icon-shouye"></i>我的报告</el-menu-item> -->
                        </el-menu>
                        <!-- 普通管理端 -->
                        <el-menu :default-active="activeIndex" mode="horizontal" :router="true" v-if="roles == 'ADMIN'">
                            <el-menu-item :index="adminIndex">
                                <i class="iconfont icon-guanlizhongxin"></i>教学管理</el-menu-item>
                            <el-menu-item index="/Admin/VirtualManage/VirtualSelectManage/VirtualSelect">
                                <i class="iconfont icon-computer"></i>虚机管理</el-menu-item>
                            <!-- <el-menu-item index="/Admin/System/SystemVersion">
                                <i class="iconfont icon-gongneng"></i>系统功能</el-menu-item> -->
                        </el-menu>
                        <!-- 互联网、超级管理员端 -->
                        <el-menu :default-active="activeIndex" mode="horizontal" :router="true" v-if="roles == 'INTERNET_ADMIN' || roles == 'SUPER_ADMIN'">
                            <el-menu-item :index="adminIndex">
                                <i class="iconfont icon-guanlizhongxin"></i>教学管理</el-menu-item>
                            <el-menu-item index="/Admin/Production/Course">
                                <i class="iconfont icon-zhizuo"></i>资源制作</el-menu-item>
                            <el-menu-item index="/Admin/VirtualManage/VirtualSelectManage/VirtualSelect">
                                <i class="iconfont icon-computer"></i>虚机管理</el-menu-item>
                            <el-menu-item index="/Admin/AdminInfo">
                                <i class="iconfont icon-zhanghaoguanli"></i>管理员用户</el-menu-item>
                            <el-menu-item index="/Admin/System/SystemVersion">
                                <i class="iconfont icon-gongneng"></i>系统功能</el-menu-item>
                        </el-menu>
                    </el-col>
                </el-col>
                <el-col class="fr" style="width:auto;">
                    <div class="jx-login" @click="jumpLogin" v-if="roles == undefined">
                        登录
                    </div>
                    <div class="jx-login-info-box" v-else>
                        <div class="jx-login-info-avatar-box">
                            <el-dropdown trigger="hover">
                                <div class="jx-login-info-avatar">
                                    <img :src="avatar" />
                                </div>
                                <el-dropdown-menu style="" slot="dropdown">
                                    <el-dropdown-item command="a" @click.native="setFn">
                                        <i class="iconfont icon-geren"></i>个人设置</el-dropdown-item>
                                    <el-dropdown-item command="b" v-if="roles == 'TEACHER' || roles == 'MARKET_TEACHER' ||  roles == 'UNIVERSITY_TEACHER' ||  roles == 'STUDENT'" @click.native="InfoMange">
                                        <i class="iconfont icon-xiaoxi"></i>消息管理</el-dropdown-item>
                                    <!-- <el-dropdown-item command="c" v-if="roles == 'MARKET_TEACHER'" @click.native="ApplyFn">
                                        <i class="iconfont icon-shenqing"></i>申请账号</el-dropdown-item>
                                    <el-dropdown-item command="c" v-if="roles == 'INTERNET_ADMIN'" @click.native="ApplyFnAdmin">
                                        <i class="iconfont icon-shenqing"></i>申请账号</el-dropdown-item> -->
                                    <el-dropdown-item command="e" divided @click.native="LogOut">
                                        <i class="iconfont icon-tuichufffpx"></i>退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                        <!-- <i class="iconfont icon-notice"></i> -->
                        <i class="iconfont icon-notice pointer" title="消息通知" v-if="roles == 'STUDENT'" @click.stop="infoShow"></i>
                        <i :class="{notification:redActive ==true && num>0}" v-if="roles == 'STUDENT'"></i>

                        <i class="iconfont icon-wenti-m" title="问题反馈" @click="ProblemFn" v-if="roles == 'TEACHER' || roles == 'MARKET_TEACHER' ||  roles == 'UNIVERSITY_TEACHER' ||  roles == 'STUDENT' || roles == 'INTERNET_ADMIN' || roles == 'SUPER_ADMIN'"></i>
                        <div id="notify-icon"  style="float:right; overflow:hidden" v-if="roles == 'STUDENT'">
                            <div class="dropdown"  v-show="flag" v-if="list.length!=''">
                                <div class="triangle_border_up">
                                    <span></span>
                                </div>
                                <ul>
                                    <p>消息通知 ({{num}})</p>
                                    <li v-for="(item, index) in list.slice(0,5)" :key="index" @click="infoFn(item,item.id)" >
                                        <div class="fl notify"><img :src='item.userPicture' /></div>
                                        <div class="fl rightpart">
                                            <p>{{item.content}}</p>
                                            <div class="detail">
                                                <span class="fl time">{{item.time}}</span>
                                                <span class="fr detail-right">详情</span>
                                            </div>
                                        </div>
                                    </li>
                                    <div class="more" @click.stop="moreLook" v-if="list.length>5">查看更多</div>
                                </ul>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!-- <div class="bread-crumb">
            <bread-crumb></bread-crumb>
        </div> -->
    </div>
</template>

<script>
    import BreadCrumb from "../components/BreadCrumb";
    export default {
        props: ['websockMsg'],
        components: { BreadCrumb },
        data() {
            return {
                activeIndex: "",
                //消息闪烁
                redActive:'',
                //是否显示下拉菜单
                flag: false,
                //消息列表5条数据
                list: '',
                //消息列表所有数据
                listAll:'',
                //登录角色 ''未登录 TEACHER 教师 ADMIN管理员 STUDENT学生
                roles: "",
                //头像
                avatar: "",
                //管理员路由
                adminIndex: "",
                //yx通知消息
                websock: null,
                over: null,
                //信息条数
                num:'',

                infoData: '',
                innerLogoImage: '',
                projectName: '',

                // 判断课程体系显示隐藏 0隐藏 1显示
                SystermDisplay: ''



            }
        },
        created() {
            let self = this;
            self.fetchDate();
            // 拉取信息
            self.loginInfo()

            // 从状态管理获取roles
            self.roles = self.$store.state.user.roles[0];
            // 判断管理员端登录用户跳转的页面
            if (self.roles == "ADMIN" || self.roles == "SUPER_ADMIN") {
                self.adminIndex = "/Admin/manage/TeachingMange";
            } else if (self.roles == "INTERNET_ADMIN") {
                self.adminIndex = "/Admin/Internet/TeachMange";
            }
            // 从状态管理获取头像
            self.avatar = self.$store.state.user.avatar;
            // 判断如果是学生登入就执行消息通知socket
            if (self.roles == "STUDENT") {
                 //self.initWebSocket()
                // self.handdleMsg()
                self.init()
                self.$nextTick(()=>{
                    document.addEventListener('click',function(){
                        self.flag = false
                    })
                })
            }
            // 判断课程体系显示隐藏
            if (self.roles == "STUDENT" || self.roles == 'TEACHER' || self.roles == 'MARKET_TEACHER' || self.roles == 'UNIVERSITY_TEACHER') {
                self.SystermDisplayFn()
            }

        },
        methods: {
            //test
            selecthandel(key){
                let isClickSystem = this.$localstorage.getLocalStorage('isClickSystem')
                if(isClickSystem && key == '/Teaching/Systerm'){
                    window.location.reload()
                }
            },
            // 拉取信息
            loginInfo() {
                let self = this
                self.$http.get('/tes/unauthorized/config?keys=projectName,innerLogoImage').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.infoData = res.data
                        self.innerLogoImage = res.data.innerLogoImage[0]
                        self.projectName = res.data.projectName[0]
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            handdleMsg(msg) {
                let self = this;
                self.global.ws.onmessage = function(res) {
                // self.global.websock.onmessage = function(res) {
                    if(self.$route.path !== '/Setting/Notice/STNotification'){
                        //数据接收
                        const redata = JSON.parse(res.data);
                        if (redata.type == 11) {
                            //新增消息
                            self.redActive = true;
                            self.flag = false
                            self.init()
                        } else if (redata.type == 12) {
                            //删除消息
                            self.init()
                        }
                    }
                }
            },
            fetchDate() {
                let self = this;
                var cur_path = self.$route.matched[1].meta.navActive; //获取当前路由
                // self.adminIndex = self.$route.matched[1].meta.navActive
                self.activeIndex = cur_path;

            },
            // 初始化消息
            init() {
                let self = this;
                self.list =''
                self.$http.get("/tes/message/new").then(response => {
                    let res = response.data;
                    if (res.code == "200") {
                        self.num = res.data.length
                        self.list = res.data
                        if(res.data.length>0 ){
                            self.redActive = true
                        }
                    } else {
                        self.$message.error(res.message);
                    }
                });
            },
            // 课程体系显示隐藏
            SystermDisplayFn(){
                let self = this
                self.$http.get('/tes/unauthorized/config?keys=courseSystemShow').then(response => {
                    let res = response.data
                    if(res.code === 200){
                        self.SystermDisplay = res.data.courseSystemShow[0].keyValue
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },

            initWebSocket() {
            //初始化weosocket
                let self = this
                let hostname = window.location.host
                const wsuri = "ws://"+hostname+"/tes/ws/global"
                self.websock = new WebSocket(wsuri);
                self.websock.onopen = self.websocketonopen;
                self.websock.onmessage = self.websocketonmessage;
                self.over = () => {
                    self.websock.close()
                }
            },

            websocketonopen(){
                console.log('open sucess')
            },
            websocketonmessage(e) {
            // 判断当前进入哪个路由页面
                if(this.$route.matched[2].meta.navActive !== '/Setting/Notice/STNotification'){
                //数据接收
                    const redata = JSON.parse(e.data);
                    let self = this
                    if (redata.type == 11) {
                        //新增消息
                        self.redActive = true;
                        self.flag = false
                        self.init()
                    } else if (redata.type == 12) {
                        //删除消息
                        self.init()
                    }
                }
            },
            //下拉展示
            infoShow(){
                if(this.flag){
                    this.flag = false
                }else{
                    this.flag = true
                    this.redActive = false;
                }
            },
            //查看更多
            moreLook(){
                this.redActive = false;
                this.flag = false;
                this.$router.push({
                    path:'/Setting/Notice/STNotification',
                })
                this.list =''
            },
            //yx 点击某条信息进入详情页页面
            infoFn(item,id){
                let self = this
                self.redActive = false;
                self.$router.push({
                    path:'/Setting/Notice/STNotification',
                })
                self.list =''

            },
            // 跳转登录
            jumpLogin() {
                this.$router.push({
                    path: "/login"
                });
            },
            // 退出登录
            LogOut() {
                let self = this;
                self.$confirm("是否退出登录?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                .then(() => {
                    self.$store.dispatch("FedLogOut").then(res => {
                        // location.reload()
                        //清空本地存储值yx
                        self.$localstorage.putLocalStorage("isClickSystem", false);
                    });
                })
                .catch(() => {});
            },
            // 个人设置
            setFn() {
                this.$router.push({
                    path: "/Setting/Notice/Myinfomation"
                });
            },
            //申请账号
            ApplyFn() {
                this.$router.push({
                    path: "/Setting/Notice/Application"
                });
            },
            //申请账号 管理员
            ApplyFnAdmin() {
                this.$router.push({
                    path: "/Setting/Notice/AdminApplication"
                });
            },
            //消息管理
            InfoMange() {
                let self = this;
                if (
                    self.roles == "MARKET_TEACHER" ||
                    self.roles == "TEACHER" ||
                    self.roles == "UNIVERSITY_TEACHER"
                ) {
                    self.$router.push({
                    path: "/Setting/Notice/TNotification"
                    });
                } else if (self.roles == "STUDENT") {
                    self.$router.push({
                    path: "/Setting/Notice/STNotification"
                    });
                }
                if(this.flag){
                    this.flag = false
                }else{
                    this.flag = true
                    this.redActive = false;
                }
            },
            //问题反馈
            ProblemFn() {
                let self = this;
                if (
                    self.roles == "MARKET_TEACHER" ||
                    self.roles == "TEACHER" ||
                    self.roles == "UNIVERSITY_TEACHER" ||
                    self.roles == "STUDENT"
                ) {
                    self.$router.push({
                    path: "/Setting/Notice/STProblemBack"
                    });
                } else if (
                    self.roles == "INTERNET_ADMIN" ||
                    self.roles == "SUPER_ADMIN"
                ) {
                    self.$router.push({
                    path: "/Setting/Notice/AProblemBacks"
                    });
                }
            }
        },
        watch: {
            $route: "fetchDate",
            'websockMsg': {
                handler: function(newval , oldval) {
                    let self = this
                    // 判断当前进入哪个路由页面
                    if(self.$route.path !== '/Setting/Notice/STNotification'){
                        //数据接收
                        if (newval.type == 11) {
                            //新增消息
                            self.redActive = true;
                            self.flag = false
                            self.init()
                        } else if (newval.type == 12) {
                            //删除消息
                            self.init()
                        }
                    }
                },
                deep: true
            }
        }
    };
</script>
<style scoped>
    .pointer{
        cursor: pointer;
    }
</style>

<style lang="scss">
    .el-dropdown {
    display: block;
    }
    .el-dropdown-menu {
        .el-dropdown-menu__item {
            i {
                font-size: 12px;
                margin-right: 8px;
            }
        }
    }
    #jx-header {
        overflow: hidden;
        height: 60px;
        line-height: 60px;
    }
    .jx-header {
        width: 100%;
        min-width: 1200px;
        height: 60px;
        line-height: 60px;
        background: #001529;
        text-align: left;
        position: fixed;
        z-index: 10;
        .el-col-12{
            width: 55%;
        }
        .jx-header-style{
            max-width: 415px;
            width: auto;
        }
        .jx-header-logo {
           // margin-left: 43px;
           margin-left: 13px;
            img {
                float: left;
                padding: 15px 0;
            }
            span {
                //float: left;
                font-size: 18px;
                color: #fff;
                // border-left: solid 1px #fff;
                margin: 22px 0 22px 17px;
               // padding-left: 17px;
                line-height: 1;
            }
        }
        .jx-login {
            font-size: 14px;
            color: #fff;
            text-align: right;
            padding-right: 40px;
            cursor: pointer;
        }
        .jx-header-nav {
            height: 60px;
            .el-menu--horizontal {
            background: none;
            border: none;
            & > .el-menu-item {
                &.is-active {
                border-bottom: none;
                color: #fff;
                i{
                    color: #fff
                }
                // background: rgba(255, 255, 255, 0.1);
                }
            }
            & > .el-menu-item:not(.is-disabled):focus,
            & > .el-menu-item:not(.is-disabled):hover {
                border-bottom: none;
                color: #fff;
                background: transparent;
                i{
                    color: #fff
                }
            // background: rgba(255, 255, 255, 0.2);
            }
                .el-menu-item {
                    // width: 10%;
                    font-size: 14px;
                    color: #cecece;
                    text-align: center;
                    border-bottom: none;
                    i {
                        font-size: 15px;
                        color: #cecece;
                        vertical-align: initial;
                        margin-right: 13px;
                        vertical-align: initial;
                    }
                }
            }
        }
        .jx-login-info-box {
            line-height: 68px;
            .jx-login-info-avatar-box {
                float: right;
                width: 30px;
                height: 30px;
                margin: 14px 39px 0 0;
                &:hover{
                    .jx-login-info-avatar{
                        border: solid 2px #cecece;
                    }
                }
            }
            .iconfont{
                color: #a1a6b0;
                &:hover{
                    color: #fff;
                    cursor: pointer;
                }
            }
            .jx-login-info-avatar {
                width: 30px;
                height: 30px;
                line-height: 26px; //yx修改
                border-radius: 20px;
                overflow: hidden;
                cursor: pointer;
                border: solid 2px rgba(0,0,0,0);
                img {
                    width: 100%;
                }
            }
            i {
                float: right;
                font-size: 18px;
                color: #a1a6b0;
                margin-right: 20px;
            }
            .notification {
                position: absolute;
                width: 8px;
                height: 8px;
                background: red;
                border-radius: 3px;
                top: 14px;
                right: 65px;
                -webkit-animation: shacck 2s infinite;
                -moz-animation: shacck 2s infinite;
                animation: shacck 2s infinite;
            }

        }
        #notify-icon {
            overflow: hidden;
            top: 30px;
            .icon-notice {
            display: block;
            cursor: pointer;
            .notification {
                position: relative;
                &:after {
                position: absolute;
                content: "";
                width: 8px;
                height: 8px;
                background: red;
                border-radius: 3px;
                top: 14px;
                right: 0px;
                -webkit-animation: shacck 2s infinite;
                -moz-animation: shacck 2s infinite;
                animation: shacck 2s infinite;
                }
            }
            }
            @-webkit-keyframes shacck {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
            }
            @-moz-keyframes shacck {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
            }
            @-o-keyframes shacck {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
            }
            @keyframes shacck {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
            }
            .dropdown {
            padding: 10px 0;
            margin: 5px 0;
            background-color: #fff;
            border: 1px solid #ebeef5;
            border-radius: 4px;
            -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            position: absolute;
            top: 55px;
            right: 60px;
            z-index: 9999;
            .triangle_border_up {
                display: block;
                width: 0;
                height: 0;
                border-width: 0 8px 8px;
                border-style: solid;
                border-color: transparent transparent #fff;
                position: absolute;
                top: -9px;
                right: 33px;
            }
            & > ul {
                padding: 10px;
                overflow: hidden;
                & > p {
                padding: 5px;
                }
                & > li {
                padding: 10px;
                width: 260px;
                border-bottom: 1px solid #eaeaea;
                overflow: hidden;
                cursor: pointer;
                .notify {
                    & > img {
                    border-radius: 50%;
                    width: 35px;
                    height: 35px;
                    }
                }
                .rightpart {
                    width: 200px;
                    margin-left: 20px;
                    & > p {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    width: 200px;
                    margin-bottom: 10px;
                    color: #666;
                    }
                    .detail {
                    .detail-right {
                        color: #385899;
                        cursor: pointer;
                    }
                    .time {
                        font-size: 12px;
                        color: #666666;
                    }
                    }
                }
                }
                .more {
                text-align: center;
                line-height: 47px;
                height: 30px;
                cursor: pointer;
                }
            }
            }
        }
    }
    .bread-crumb {
        position: fixed;
        top: 60px;
        width: 100%;
        height: 60px;
        line-height: 60px;
        background: #fff;
        z-index: 1;
        .el-breadcrumb {
            margin: 0px auto 0;
            width: 1200px;
            font-size: 12px;
            height: 60px;
            line-height: 60px;
        }
    }
</style>
